﻿@namespace MudBlazor.Docs.Examples

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

@code {
    string SelectedValue { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;
}